<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>账户信息</title>
    <link rel="stylesheet" href="../../assets/fonts/iconfont.css">
    <link rel="stylesheet" href="../../assets/css/base.css">
    <link rel="stylesheet" href="../../assets/css/sn-style.css">
    <link rel="stylesheet" href="../../assets/css/sn-user.css">
    <link rel="stylesheet" href="../../assets/build/layer/theme/default/layer.css">
    <link rel="stylesheet" href="../../assets/build/crop/cropbox.css">
</head>

<body class="sn-bg">
    <!--header引入区域-->
    <div class="headerbgc">
        <div style="border-bottom:1px solid rgb(228, 228, 228);">
            <div class="head">
                <a href="#" class="logoImg"> <img src="./../../assets/image/logo.svg" alt=""></a>
                <h3>账户中心</h3>
                <span class="head-info"><a href="./../../index.html">首页</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">退出</a></span>
            </div>
        </div>
    </div>
    <div style="height:80px;"></div>
    <div class="sn-container">
        <div class="control-wrap sn-clr">
            <div class="layout">
                <div class="control-layout-left">
                    <div class="menu-wrap">
                        <div class="context quickentry">
                            <span class="nav-title"> 菜单栏</span>
                            <ul class="">
                                <li class="item">
                                    <a href="./index.html">账户首页</a>
                                </li>
                                <li class="item selected">
                                    <a href="./account-info.html">账户资料</a>
                                </li>
                                <li class="item">
                                    <a href="./order.html">我的订单</a>
                                </li>
                                <li class="item ">
                                    <a href="./collect.html"> 我的收藏</a>
                                </li>
                                <li class="item">
                                    <a href="./income.html"> 我的收益</a>
                                </li>
                                <li class="item ">
                                    <a href="./wallet.html"> 我的余额</a>
                                </li>
                                <li class="item ">
                                    <a href="./news.html"> 我的资讯</a>
                                </li>
                                <li class="item">
                                    <a href="./matter.html"> 我的素材 </a>
                                </li>
                                <li class="item">
                                    <a href="./supply.html"> 我的供需</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="control-content">
                    <div class="info-title">
                        基础信息
                    </div>
                    <div class="account-info sn-clr">
                        <div class="info-box-left">
                            <div class="avater ">
                                <!-- <a href=""></a>-->
                            </div>
                            <a class="edit-avater" href="#">修改头像</a>
                        </div>
                        <div class="info-box-right">
                            <div class="line">
                                <span>会员身份：个人</span>
                                <a class="upgrade" href="#">升级为服务商</a>
                            </div>
                            <div class="line">
                                <span>会员名：tinsin8888</span>
                                <a class="upgrade Modify" href="#">修改昵称</a>
                            </div>
                            <div class="line">
                                <span>ID：37827382</span>
                            </div>
                        </div>

                    </div>

                    <div class="info-title">
                        账号安全
                    </div>
                    <div class="account-info">
                        <ul class="safe-info">
                            <li>
                                <div class="safe-level-area sn-clr">
                                    <label>您当前的账号安全程度</lab>
                           <span class="safe-level low"></span>
                           <label>低</label>
                                </div>
                            </li>
                            <li class="item identity sn-clr">
                                <div class="title"> 登录密码</div>
                                <div class="supply v-line"> 设置登录密码能提高账号的安全性</div>
                                <div class="operate">
                                    <span class="orange" href="">未设置 </span>|
                                    <a href=""> 设置</a>
                                </div>
                            </li>
                            <li class="item phonebind sn-clr">
                                <div class="title"> 手机绑定</div>
                                <div class="supply"> 绑定手机可以通过手机账户登录、余额支付、找回密码、修改手机绑定、修改邮箱绑定、解除微信绑定</div>
                                <div class="operate">
                                    <span class="orange" href="">未设置 </span>|
                                    <a href=""> 设置</a>
                                </div>
                            </li>
                            <li class="item phonebind sn-clr">
                                <div class="title"> 邮箱绑定</div>
                                <div class="supply"> 绑定邮箱可以通过邮箱登录、找回密码，免费获取更多资讯</div>
                                <div class="operate">
                                    <span class="orange" href="">未设置 </span>|
                                    <a href=""> 设置</a>
                                </div>
                            </li>
                            <li class="item phonebind sn-clr">
                                <div class="title"> 绑定微信</div>
                                <div class="supply v-line"> 您已绑定了微信，可以通过微信登录账户</div>
                                <div class="operate">
                                    <span class="green" href="">已设置 </span>|
                                    <a href=""> 设置</a>
                                </div>
                            </li>


                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>
            <a href="#">关于我们</a> |
            <a href="#">会员服务</a> |
            <a href="#">广告中心</a> |
            <a href="#">战略伙伴</a> |
            <a href="#">版权声明</a> |
            <a href="#">联系方式</a>
        </p>
        <p>Copyright © 2002-2014 mcwzg. 杭州大想网络信息有限公司 版权所有 浙ICP备11063754号-1</p>
    </footer>
    <div class="avatar-container sn-hide" id="avatarDialog">
        <div class="avatar-container">
            <div class="imageBox">
                <div class="thumbBox"></div>
                <div class="spinner" style="display: none"></div>
            </div>
            <div class="action">
                <div class="new-contentarea tc">
                    <a href="javascript:void(0)" class="upload-img">
                                        <label for="upload-file">选择图片</label>
                                    </a>
                    <input type="file" class="" name="upload-file" id="upload-file" />
                </div>
                <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
                <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
            </div>
            <input type="hidden" name="setImg" id="setImg">
        </div>
    </div>
    <div id="ModifyDialog" class="sn-hide">
        <p><span>昵称：</span><input type="text" placeholder="请输入新的昵称"></p>
    </div>
</body>
<script src="../../assets/build/jquery/dist/jquery.js"></script>
<script src="../../assets/build/layer/layer.js"></script>
<script src="../../assets/build/crop/cropbox.js"></script>
<script>
$('.edit-avater').click( function() {
    //弹出
    layer.open({
      type: 1,
      skin: "sui-layer",
      title: "修改头像",
      area: ["600px", "600px"],
      content: $("#avatarDialog"),
      btn: ["上传", "取消"],
      btn2: function(index) {
        //关闭弹窗
        $("#setImg").val("");
        layer.close(index);
        //页面可以滚动
        $("html").removeClass("body-fixed");
      }
    });
 });
 $('.Modify').click( function() {
    //弹出
    layer.open({
      type: 1,
      title: "修改昵称",
      area: ["350px", "200px"],
      content: $("#ModifyDialog"),
      btn: ["确定", "取消"]
    });
 });
</script>
</html>